<template>
  <div class="page-container">
    <div class="in-container">
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getTableData()"
        :autostyle="'height: 100%;'"
        :option="tableData.option"
        :is-pagination="true"
      >
        <el-table-column prop="moduleCode" label="模块代码" />
        <el-table-column prop="moduleName" label="模块名称" />
        <el-table-column prop="prefix" label="前缀" />
        <el-table-column prop="suffix" label="后缀" />
        <el-table-column prop="codeLength" label="编码长度" />
        <el-table-column prop="originSerial" label="起始流水号" />
        <el-table-column prop="restartType" label="流水号重启方式" >
          <template #default="scope"> 
            {{ parseType(scope.row.restartType) }}
          </template>
        </el-table-column>
        <el-table-column prop="codeFormat" label="编码格式" />
        <el-table-column prop="memo" label="备注" />
        <el-table-column label="操作" width="90px" fixed="right">
          <template #default="scope">
            <el-button @click="update(scope.row)" link type="primary">编辑</el-button>
          </template>
        </el-table-column>
      </AppPageTable>
      <el-dialog v-model="dialogData.show" title="编辑编码">
        <el-form
          :model="formData"
          ref="form"
          :rules="formRules"
          label-suffix="："
          label-width="auto"
        >
          <el-row :gutter="8">
            <el-col :span="8">
              <el-form-item label="模块代码" prop="moduleCode">
                <el-input
                  v-model="formData.moduleCode"
                  placeholder="请输入模块代码"
                  clearable
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="前缀" prop="prefix">
                <el-input
                  v-model="formData.prefix"
                  placeholder="请输入前缀"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="后缀" prop="suffix">
                <el-input
                  v-model="formData.suffix"
                  placeholder="请输入后缀"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="8">
              <el-form-item label="起始流水号" prop="originSerial">
                <el-input
                  v-model="formData.originSerial"
                  placeholder="请输入起始流水号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="编码长度" prop="codeLength">
                <el-input
                  v-model="formData.codeLength"
                  placeholder="请输入编码长度"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="新年月启用"
                prop="newDateformat"
                v-if="formData.restartType == '0'"
              >
                <el-input
                  v-model="formData.newDateformat"
                  placeholder="请输入新年月启用(按月)"
                  clearable
                  @blur="handleRowChange('newDateformat')"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item
                label="新年月启用"
                prop="newDateformat"
                v-if="formData.restartType == '1'"
              >
                <el-input
                  v-model="formData.newDateformat"
                  placeholder="(按年）日期格式：01-01"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="新年月启用"
                prop="newDateformat"
                v-if="
                  formData.restartType != '0' && formData.restartType != '1'
                "
              >
                <el-input
                  v-model="formData.newDateformat"
                  placeholder="请输入新年月启用"
                  clearable
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="8">
              <el-form-item label="备注" prop="memo">
                <el-input
                  class="form-item-wrapper"
                  v-model="formData.memo"
                  placeholder="请输入备注"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="编码格式" prop="codeFormat">
                <el-input
                  class="form-item-wrapper"
                  v-model="formData.codeFormat"
                  placeholder="请输入"
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="24">
              <el-form-item label="流水号重启方式" prop="restartType">
                <el-radio-group
                  name="radioGroup"
                  v-model="formData.restartType"
                >
                  <el-radio :label="3">不重启</el-radio>
                  <el-radio :label="1">按年重启</el-radio>
                  <el-radio :label="0">按月重启</el-radio>
                  <el-radio :label="2">按日重启</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" link>取消</el-button>
            <el-button
              type="primary"
              @click="submit"
              :loading="dialogData.btnLoading"
            >
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: {
    AppPageTable,
  },
  data() {
    return {
      tableData: {
        data: [],
        option: useTableOption(),
      },
      dialogData: {
        show: false,
        btnLoading: false,
      },
      formData: {
        id: undefined,
        moduleCode: undefined, //模块代码
        prefix: undefined, //前缀
        suffix: undefined, //后缀
        originSerial: undefined, //起始流水号
        codeLength: undefined, //编码长度
        newDateformat: undefined, //新年月启用
        memo: undefined, //备注
        codeFormat: undefined, //编码格式
        restartType: 0, //流水号重启方式
      },
      formRules: {
        moduleCode: [
          { required: true, message: "模块代码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    parseType(data){
      const typeMap={
        '0': '按月重启',
        '1': '按年重启',
        '2': '按日重启',
      }
      return typeMap[data] || '不重启';
    },
    update(data) {
      this.formData=JSON.parse(JSON.stringify(data))
      this.dialogData.show=true
    },
    getTableData() {
      this.tableData.option.loading = true;
      this.$http
        .get("/api/bucode/query")
        .then((res) => {
          this.tableData.data = res;
          // this.tableData.option.total = res.totalElements;
        })
        .finally(() => {
          this.tableData.option.loading = false;
        });
    },
    submit() {
      this.dialogData.btnLoading=true
      this.$http.post('/api/bucode/edit',this.formData).then(res=>{
        if(res.status){
          this.$message.success(res.message)
          this.getTableData()
          this.dialogData.show=false
        }else{
          this.$message.error(res.message)
        }
      }).finally(()=>this.dialogData.btnLoading=false)
    },
    cancel() {
      this.dialogData.show=false
    },
  },
  watch: {
    "dialogData.show"(newVal) {
      if (!newVal) {
        this.formData = {
          id: undefined,
          moduleCode: undefined, //模块代码
          prefix: undefined, //前缀
          suffix: undefined, //后缀
          originSerial: undefined, //起始流水号
          codeLength: undefined, //编码长度
          newDateformat: undefined, //新年月启用
          memo: undefined, //备注
          codeFormat: undefined, //编码格式
          restartType: 0, //流水号重启方式
        };
        this.$nextTick(() => {
          this.$refs.form.resetFields();
        });
      }
    },
  },
  mounted() {
    this.getTableData();
  },
});
</script>

<style lang="scss" scoped></style>
